<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;	
				}
				body{
					position: absolute;
					width: 100vw;
					height: 100vh;
					background: url(../img/崖桃.jpg) no-repeat;
				}
				.box{
					position: relative;
					width: 1600px;
					height: 750px;
					background-color: aqua;
				}
				.box1{
					position: absolute;/* (绝对定位) */
					width: 300px;
					height: 300px;
					background-color: azure;
					border-radius: 200px;
					top: 200px;
					left: 100px;
				}
				.box2{
					position: absolute;
					width: 400px;
					height: 400px;
					top: 150px;
					left: 500px;
					color: #ffaa7f;
					line-height:70px/* 行间距 */
				}
				.box4{
					position: absolute;
					width: 70px;
					height: 59px;
					background-color: #00FFFF;
					top: 450px;
					left: 900px;
					background: url(../img/mv.jpg);
					border-radius: 100px;
				}
				
				audio{
					display: none;
				}
				.box3 img{
								position: absolute;
								margin: 50px;
								width: 200px;
								height: 200px;
								border-radius: 100px;
								animation: rotateimg 5s;
								animation-iteration-count: infinite ;
								-webkit-animation: rotateimg 5s linear;
								-webkit-animation-iteration-count: infinite ;
							}
							@-ms-keyframes rotateimg{
								0%{
									transform: rotate(0deg);
								}
								100%{
									transform: rotate(360deg);
								}
							}
							@-webkit-keyframes rotateimg{
								0%{
									-webkit-transform: rotate(0deg);
								}
								100%{
									-webkit-transform: rotate(360deg);
								}
							}
							#ss {
								background-color: #ffaa7f;
								height: 200px;
								width: 10px;
								position: fixed;/* 固定定位 */
								left: 0px;
								top: 250px;
								transition:all 0.8s;
								overflow:hidden;/* 超出部分隐藏 */			
								/* 我们知道当子元素开始浮动了，会脱离文档流，其父元素的高度就会变为0，
								这个时候页面其他元素就会向上占据位置，就会导致页面混乱
								这个时候我们在父元素设置overflow:hidden,就解决了页面混乱的问题。 */
							}
							#ss:hover {
								width: 100px;
								transition:all 0.8s;
								color: #FFF;/* 字体颜色 */
								background-color: #aa557f;
							}
							#ss a {
								display: block;/* 显示块 */
								height: 200px;
								width: 100px;
								text-decoration: none;/* 取消下滑线 */
								color: #333;
								text-align: center;/* 文字居中 */
								font-family: "叶根友钢笔行书升级版";
								font-size: 36px;
								transition:all 0.8s;
							}
							#ss a:hover {
								color: #FFF;
								
							}
							
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box3">
				<img src="../img/12.jpeg">
			</div>
			</div>
			<div class="box2">
				<h1>歌名：</h1>
				<h2>千与千寻</h2>
				<h3>纯音乐无歌词...</h3>
				<audio controls="controls" autoplay="autoplay" loop="loop">
					<source src="../img/1.mp3" type="audio/mp3"></source>
				</audio>
				<div class="box4"></div>
			</div>
			<div id="ss">
			  <a href="http://seven-seconds-lowers.gitee.io/video-mv/%E9%9B%BE/">M<br>V<br>视<br>频</a>
			  
			</div>
	</body>
</html>
